import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import "../../../assets/sass/create_template/TmpTool/RightClick/right_click.css";
import { closemenus, delIterm } from "../../../store";

const RightClick = () => {
  const menuInfo = useSelector((state: any) => state.menuInfo);
  const { menuTop, menuLeft } = menuInfo;
  const dispatch = useDispatch();
  // 删除
  const delmenu = () => {
    dispatch(delIterm());
  };
  useEffect(() => {
    window.addEventListener("click", () => {
      dispatch(closemenus());
    });
  }, []);
  return (
    <div
      className="right_click"
      style={{ top: menuTop + "px", left: menuLeft + "px" }}
    >
      <div className="combo">组合</div>
      <div className="shear">
        <span>剪切</span>
        <span className="eng">Ctrl+X</span>
      </div>
      <div className="copy">
        <span>复制</span>
        <span className="eng">Ctrl+C</span>
      </div>
      <div onClick={delmenu} className="del">
        <span>删除</span>
        <span className="eng">Delete</span>
      </div>
      <div className="combo">添加到“我收藏的组件”</div>
      <div className="line"></div>
      <div>样式</div>
      <div>动画</div>
      <div>触发</div>
      <div className="line"></div>
      <div>添加音效</div>
      <div>添加链接</div>
      <div className="line"></div>
      <div>复制动画</div>
      <div className="del_animation">删除动画</div>
      <div>添加动画</div>
      <div className="line"></div>
      <div className="boxc">
        <div>置顶</div>
        <div>置底</div>
        <div>上移</div>
        <div>下移</div>
      </div>
    </div>
  );
};

export default RightClick;
